@charset "UTF-8";

@import "common/common";



.wrap{
    position: relative;
    left: 0;
    width: 100%;
    height: 100%;
//  overflow: hidden;
    font-family: "microsoft yahei";
    img{
        width: 100%;
        height: 100%;
        display: none;
    }
    .center{
        left: 0;
        right: 0;
        margin:  0 auto;
    } 
    //logo
    .logo{
        background: url(../img/index/logo.png) no-repeat center;
        background-size:cover ;
        position: absolute;
        right: r(20px);
        top: r(18px);
        width: r(257px);
        height: r(75px);
        animation: bounceInRight 1s linear;
    }
    .logo.active{
        animation: hearbeat 1.5s ease-in-out infinite both;
        @keyframes hearbeat{
           form{
               transform: scale(1);
               transition-timing-function: ease-out;
           }
           10%{
               transform: scale(0.81);
               transition-timing-function: ease-in;
           }
           17%{
               transform: scale(0.91);
               transition-timing-function: ease-out;
           }
           33%{
               transform: scale(0.75);
               transition-timing-function: ease-in;
           }
           45%{
               transform: scale(1);
               transition-timing-function: ease-out;
           } 
        }
    }
}

//加载页
#page_load{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/load/load_bg.jpg) no-repeat center;
    background-size:cover ;
    overflow: hidden;
    //人物
    .load_figure{
        position: absolute;
        bottom: r(180px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(667px);
        height: r(960px);
        z-index: 1;
    }
    //火箭
    .load_rocket{
        position: absolute;
        left: r(238px);
        bottom: r(200px);
        width: r(157px);
        height: r(116px);
        transform: rotate(60deg);
        z-index: 2;
    }
    .load_rocket.active{
        transform-origin: 400% 440%;
        animation: in-round 6s cubic-bezier(.83,-0.33,.07,.67) infinite;
        @keyframes in-round{
            0%{
                transform: rotate(0deg);
            }
            25%{
                transform: rotate(60deg);
                transition-timing-function: ease-in;
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(240deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    }
    //旗帜
    .load_flag{
        position: absolute;
        right: r(12px);
        bottom: r(250px);
        width: r(113px);
        height: r(165px);
        z-index: 5;
    }
    //星球
    .load_star{
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: r(598px);
        height: r(291px);
    }
    //提示牌
    .load_sign{
        position: absolute;
        left: r(221px);
        bottom: 0px;
        width: r(259px);
        height: r(198px);
        z-index: 5;
    }
    .load_sign.active{
        animation: slide-down 1s cubic-bezier(0.930,0.730,0.450,0.150) both ;
        @keyframes slide-down{
            0%{
                transform: translateY(r(-1004px));
            }
            100%{
                transform: translateY(0);
            }
        }
    }
    //跳过按钮
    .load_btn{
        position: absolute;
        right: r(15px);
        bottom: r(25px);
        width: r(134px);
        height: r(79px);
        opacity: 1;
        z-index: 5;
        background: url(../img/load/skip.png) no-repeat center;
        background-size:contain ;
    }
    .load_btn.active{
        animation: bouce-in-right 1.1s both;
        @keyframes bouce-in-right{
            0%{
                transform: translateX(r(-750px));
                animation-timing-function: ease-in;
                opacity: 0;
            }
            38%{
                transform: translateX(0);
                animation-timing-function: ease-out;
                opacity: 1;
            }
            55%{
                transform: translateX(r(50px));
                animation-timing-function: ease-in;
            }
            72%,90%,100%{
                transform: translateX(0);
                animation-timing-function: ease-out;
            }
            81%{
                transform: translateX(r(32px));
                animation-timing-function: ease-out;
            }
            95%{
                transform: translateX(r(8px));
                animation-timing-function: ease-out;
            }
        }
    }
}
//首页
#page_home{
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center center;
    background-size:cover ;
    .home_theme{
        position: absolute;
        top: r(111px);
        width: r(708px);
        height: r(352px);
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 4;
    }
    .home_theme.active{
        animation:scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        @keyframes scale-in-center{
            0%{
                transform: scale(0);
                opacity: 0;
            }
            100%{
                transform: scale(1);
                opacity: 1;
            }
        }
    }
    .home_mouth{
        position: absolute;
        left: r(38px);
        top: r(368px);
        width: r(689px);
        height: r(486px);
    }
    .home_mouth_center{
        position: absolute;
        left: r(302px);
        top: r(530px);
        width: r(220px);
        height: r(177px);
    }
    //首页人物
    .home_pro{
       position: absolute;
       left: r(11px);
       top: r(546px);
       width: r(235px);
       height: r(357px);
       z-index: 4;
    }
    .home_man_left{
       position: absolute;
       left: r(21px);
       top: r(606px);
       width: r(362px);
       height: r(461px);
       z-index: 4;
    }
    .home_man_right{
       position: absolute;
       right: r(5px);
       top: r(537px);
       width: r(357px);
       height: r(582px);
       z-index: 4;
    }
    //开始按钮
    .home_begin{
        position: absolute;
        top: r(1044px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(392px);
        height: r(130px);
        background: url(../img/index/btn_begin.png) no-repeat center;
        background-size:contain ;
        z-index: 6;
    }
    
    // 开始按钮进入动画
    .home_begin.active {
        animation: bounce-in-bottom 1.1s both;
        @keyframes bounce-in-bottom {
          0% {
            transform: translateY(r(500px));
            animation-timing-function: ease-in;
            opacity: 0;
          }
          38% {
            transform: translateY(0);
            animation-timing-function: ease-out;
            opacity: 1;
          }
          55% {
            transform: translateY(r(65px));
            animation-timing-function: ease-in;
          }
          72% {
            transform: translateY(0);
            animation-timing-function: ease-out;
          }
          81% {
            transform: translateY(r(28px));
            animation-timing-function: ease-in;
          }
          90% {
            transform: translateY(0);
            animation-timing-function: ease-out;
          }
          95% {
            transform: translateY(r(8px));
            animation-timing-function: ease-in;
          }
          100% {
            transform: translateY(0);
            animation-timing-function: ease-out;
          }
        }
    }
}

//猜歌开始页面
.page_music {
    position: absolute;
    top: 0;
    left: 200%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    //老歌页面开始
    .old_music {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 100%;
        .old_man {
            position: absolute;
            top: r(75px);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(550px);
            height: r(700px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .light {
            position: absolute;
            top: 0;
            right: 0;
            width: r(300px);
            height: r(140px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .flower {
            position: absolute;
            top: 38%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(700px);
            height: r(280px);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //音乐选项操作开始
    .music_order {
        position: absolute;
        bottom: r(100px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(660px);
        height: r(300px);
        z-index: 2;
        //选项
        .item {
            width: r(500px);
            height: r(110px);
            line-height: r(55px);
            margin-bottom: r(20px);
            padding-left: 10%;
            
            button {
                width: 100%;
                height: 100%;
                background: none;
                outline: none;               
                text-align: center;
                font-size: r(30px);
                font-weight: bold;
                
                letter-spacing: 4px;
                word-spacing: 4px;
            }
        }
        .item_a {
            background: url(../img/music/optionA.png) no-repeat left;
            background-size: 100% 100%;
        }
        .item_b {
            background: url(../img/music/optionB.png) no-repeat left;
            background-size: 100% 100%;
        }
        .item_c {
            background: url(../img/music/optionC.png) no-repeat left;
            background-size: 100% 100%;
        }
        //游戏时间
        .music_time {
            position: absolute;
            right: r(-10px);
            top: r(-30px);
            width: r(135px);
            height: r(140px);
            background: url(../img/music/time.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            line-height: r(140px);
            font-size: r(30px);
        }
        //下一首歌
        .next_music {
            position: absolute;
            top: 40%;
            right: 0;
            width: r(88px);
            height: r(230px);
            line-height: r(32px);
            text-align: center;
            font-size: r(30px);
            font-weight: bold;
            background: url(../img/music/next_music.png) no-repeat;
            background-size: 100% 100%;
        }
    }
    //流行歌曲页面
    .popular_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/fashion_background.png) no-repeat center;
        background-size: 100% 100%;
        .woman_talk {
            position: absolute;
            top: r(55px);
            left: r(10px);
            width: r(440px);
            height: r(280px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .flower_man {
            position: absolute;
            left: r(40px);
            top: r(360px);
            width: r(600px);
            height: r(380px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .beach_woman {
            position: absolute;
            right: 0;
            top: r(150px);
            width: r(400px);
            height: r(580px);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //摇滚音乐开始
    .rock_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/bg.jpg) no-repeat center;
        background-size: 100% 100%;
        .light {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(560px);
            height: r(200px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .diban {
            position: absolute;
            top: 52%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 100%;
            height: r(160px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .singer {
            position: absolute;
            top: 18%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(450px);
            height: r(580px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audience_left {
            position: absolute;
            left: 0;
            top: 36%;
            width: r(330px);
            height: r(340px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audience_right {
            position: absolute;
            right: 0;
            top: 36%;
            width: r(330px);
            height: r(340px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audlf_talk {
            position: absolute;
            left: 0;
            top: 26%;
            width: r(210px);
            height: r(180px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audrg_talk {
            position: absolute;
            right: 0;
            top: 24%;
            width: r(240px);
            height: r(200px);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //电影金曲开始
    .movie_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 100%;
        .man_woman {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(740px);
            height: r(535px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .wall {
            position: absolute;
            top: 54%;
            left: 0;
            width: 100%;
            height: r(100px);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .zixia_talk {
            position: absolute;
            top: 10%;
            left: r(5px);
            width: r(650px);
            height: r(220px);
            img {
                width: 100%;
            }
        }
    }
    //经典音乐开始
    .classic_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 100%;
        .light {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(560px);
            height: r(200px);
            z-index: 3;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .grid {
            position: absolute;
            top: 42%;
            left: 0;
            width: 100%;
            img {
                width: 100%;
            }
        }
        .people {
            position: absolute;
            top: r(70px);
            left: 0;
            width: 100%;
            padding-left: r(10px);
            img {
                width: 95%;
            }
        }
        .soap_man {
            position: absolute;
            top: r(80px);
            left: r(80px);
            width: 76%;
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .baffle_left {
            position: absolute;
            top: r(250px);
            left: 0;
            width: r(400px);
            img {
                width: 100%;
            }
        }
        .baffle_right {
            position: absolute;
            top: r(330px);
            right: 0;
            width: r(400px);
            z-index: 3;
            img {
                width: 100%;
            }
        }
    }
    //车载音乐开始
    .car_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 105%;
        .light {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(560px);
            height: r(200px);
            z-index: 3;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .car {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 96%;
            img {
                width: 100%;
            }
        }
        .yao_text {
            position: absolute;
            top: 3%;
            left: r(20px);
            width: r(480px);
            img {
                width: 100%;
            }
        }
        .flow_right {
            position: absolute;
            top: 20%;
            right: r(30px);
            width: r(170px);
            z-index: 2;
            img {
                width: 100%;
            }
        }
    }
    //适配中小型手机
    @media screen and(min-height:416px) and (max-height:503px) {
        //老歌适配开始
        .old_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/music/classics_background.png) no-repeat;
            background-size: 100% 100%;
            .old_man {
                position: absolute;
                top: r(60px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(460px);
                height: r(580px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .light {
                position: absolute;
                top: 0;
                right: 0;
                width: r(300px);
                height: r(140px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .flower {
                position: absolute;
                top: r(380px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(510px);
                height: r(220px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        //流行歌曲适配
        .popular_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/music/fashion_background.png) no-repeat center;
            background-size: 100% 100%;
            .woman_talk {
                position: absolute;
                top: r(50px);
                left: r(10px);
                width: r(320px);
                height: r(240px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .flower_man {
                position: absolute;
                left: r(10px);
                top: r(320px);
                width: r(530px);
                height: r(340px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .beach_woman {
                position: absolute;
                right: 0;
                top: r(130px);
                width: r(300px);
                height: r(500px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        //摇滚音乐适配开始
        .rock_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/bg.jpg) no-repeat center;
            background-size: 100% 100%;
            .light {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(520px);
                height: r(180px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .diban {
                position: absolute;
                top: 54%;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: 100%;
                height: r(140px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .singer {
                position: absolute;
                top: r(130px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(400px);
                height: r(540px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audience_left {
                position: absolute;
                left: 0;
                top: 30%;
                width: r(320px);
                height: r(340px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audience_right {
                position: absolute;
                right: 0;
                top: 30%;
                width: r(310px);
                height: r(320px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audlf_talk {
                position: absolute;
                left: 0;
                top: 26%;
                width: r(150px);
                height: r(150px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audrg_talk {
                position: absolute;
                right: 0;
                top: 24%;
                width: r(200px);
                height: r(180px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        //选项操作适配开始
        .music_order {
            position: absolute;
            bottom: r(100px);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(660px);
            height: r(300px);
            z-index: 2;
            //选项
            .item {
                width: r(500px);
                height: r(110px);
                line-height: r(100px);
                margin-bottom: r(20px);
                padding-left: 10%;
                button {
                    width: 100%;
                    height: 100%;
                    background: none;
                    outline: none;
                    text-align: center;
                    font-size: r(38px);
                }
            }
            .item_a {
                background: url(../img/music/optionA.png) no-repeat left;
                background-size: 100% 100%;
            }
            .item_b {
                background: url(../img/music/optionB.png) no-repeat left;
                background-size: 100% 100%;
            }
            .item_c {
                background: url(../img/music/optionC.png) no-repeat left;
                background-size: 100% 100%;
            }
            //游戏时间
            .music_time {
                position: absolute;
                right: r(-10px);
                top: r(-30px);
                width: r(135px);
                height: r(140px);
                background: url(../img/music/time.png) no-repeat;
                background-size: 100% 100%;
                text-align: center;
                line-height: r(140px);
                font-size: r(30px);
            }
            //下一首歌
            .next_music {
                position: absolute;
                top: 40%;
                right: 0;
                width: r(88px);
                height: r(230px);
                line-height: r(32px);
                text-align: center;
                font-size: r(30px);
                font-weight: bold;
                background: url(../img/music/next_music.png) no-repeat;
                background-size: 100% 100%;
            }
        }
        //电影金曲开始
        .movie_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/music/classics_background.png) no-repeat;
            background-size: 100% 100%;
            .man_woman {
                position: absolute;
                top: r(220px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(700px);
                height: r(575px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .wall {
                position: absolute;
                top: 56%;
                left: 0;
                width: 100%;
                height: r(100px);
                img {
                    width: 100%;
                }
            }
            .zixia_talk {
                position: absolute;
                top: r(66px);
                left: r(5px);
                width: r(650px);
                height: r(220px);
                img {
                    width: 100%;
                }
            }
        }
    }
}

#page_result{
    position: absolute;
    top: 0;
    left: 300%;
    width: 100%;
    height: 100%;
    background: url(../img/result/result_bg2.jpg) no-repeat center;
    background-size: 100% 100%;
    color: rgb( 37, 29, 25 );
    font-weight: 600;
    font-family: "microsoft yahei";
    .result_name{
        position: absolute;
        top: r(16px);
        left: r(15px);
        width: r(295px);
        height: r(108px);
        animation: bounceInLeft 1s linear;
        //信息边框
        .name_bg{
            position: relative;
            width: 100%;
            height: 100%;
            background: url(../img/result/name.png) no-repeat center;
            background-size:100% 100% ;
        }
        //头像
        .portrait{
            position: absolute;
            left: r(25px);
            top: r(22px);
            width: r(62px);
            height: r(62px);
            z-index: 2;
        }
        //昵称  
        .name{
            position: absolute;
            right: r(80px);
            top: r(36px);
            font-size: r(24px);
            color: rgb( 37, 29, 25 );
            text-align: center;
        }  
    }
    //勋章
    .result_medal{
        position: absolute;
        top: r(114px);
        left: 0;
        right: 0;
        margin:  0 auto;
        width: r(231px);
        height: r(269px);
        animation: fadeIn 4s linear;
        animation: fadeIn 4s linear;
    }
    //猜中数量
    .result_sum{
        position: absolute;
        top: r(381px);
        width: r(342px);
        height: r(103px);
        font-size: r(52px);
        color: rgb( 37, 29, 25 );
        line-height: r(108px);
        text-align: center;
        padding-right: r(24px);
        background: url(../img/result/result.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInDown 2s linear;
    }
    //评价语
    .result_text{
        position: absolute;
        top: r(493px);
        width: r(710px);
        height: r(200px);
        font-size: r(32px);
        text-align: center;
        line-height: r(60px);
        padding: r(40px);
        background: url(../img/result/result_text.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInUp 3s linear;
    }
    //两个按钮
    .result_nextbtn{
        position: absolute;
        left: r(39px);
        top: r(709px);
        width: r(305px);
        height: r(114px);
        font-size: r(35px);
        text-align: center;
        line-height: r(94px);
        padding-left: r(40px);
        background: url(../img/result/btn_left.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInLeft 4s linear;
    }
    .result_sharebtn{
        position: absolute;
        left: r(382px);
        top: r(706px);
        width: r(347px);
        height: r(112px);
        font-size: r(35px);
        text-align: center;
        line-height: r(96px);
        padding-right: r(70px);
        background: url(../img/result/btn_right.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInRight 4s linear;
    }
    //排名标题
    .result_rank_title{
        position: absolute;
        bottom:r(255px);   //830px
        width: r(418px); 
        height: r(119px);
        z-index: 4;
    }
    //排名
    .result_rank{
        position: absolute;
        bottom: r(20px);
        width:r(685px);
        height: r(282px);
        background: url(../img/result/rank.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceIn 4s linear;
        ul{
            padding: r(40px);
        }
        li{
            margin-bottom: r(15px);
            >div{
               white-space: nowrap;
            } 
        }
        .rank_name,.rank_num,.rank_gad{
            font-size: r(24px);
        }
        .rank_portrait,.rank_medal{
            display: inline-block;
            vertical-align: middle;
        }
        //头像
        .rank_portrait{
            width: r(52px);
            height: r(54px);
            margin-left:r(8px);
        }
        .rank_medal{
            width: r(47px); 
            height: r(54px);
            margin-right: r(10px);
            margin-left: r(5px);
        }
    }
}
